<template>
	<view class="notification-settings">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="header-left" @tap="goBack">
				<text class="back-icon">‹</text>
			</view>
			<view class="header-center">
				<text class="header-title">消息设置</text>
			</view>
			<view class="header-right"></view>
		</view>

		<!-- 设置内容 -->
		<view class="settings-content">
			<!-- 通知总开关 -->
			<view class="setting-section">
				<view class="section-title">通知总开关</view>
				<view class="setting-item">
					<view class="setting-left">
						<uni-icons type="notification" size="20" color="#666"></uni-icons>
						<text class="setting-text">接收通知</text>
					</view>
					<switch :checked="settings.enableNotification" @change="toggleNotification" color="#007AFF" />
				</view>
			</view>

			<!-- 消息类型设置 -->
			<view class="setting-section" v-if="settings.enableNotification">
				<view class="section-title">消息类型</view>
				<view class="setting-item" v-for="(item, key) in messageTypes" :key="key">
					<view class="setting-left">
						<uni-icons :type="item.icon" size="20" color="#666"></uni-icons>
						<view class="setting-info">
							<text class="setting-text">{{ item.name }}</text>
							<text class="setting-desc">{{ item.desc }}</text>
						</view>
					</view>
					<switch :checked="settings[key]" @change="(e) => toggleMessageType(key, e)" color="#007AFF" />
				</view>
			</view>

			<!-- 提醒方式设置 -->
			<view class="setting-section" v-if="settings.enableNotification">
				<view class="section-title">提醒方式</view>
				<view class="setting-item" v-for="(item, key) in reminderTypes" :key="key">
					<view class="setting-left">
						<uni-icons :type="item.icon" size="20" color="#666"></uni-icons>
						<view class="setting-info">
							<text class="setting-text">{{ item.name }}</text>
							<text class="setting-desc">{{ item.desc }}</text>
						</view>
					</view>
					<switch :checked="settings[key]" @change="(e) => toggleReminderType(key, e)" color="#007AFF" />
				</view>
			</view>

			<!-- 免打扰时间 -->
			<view class="setting-section" v-if="settings.enableNotification">
				<view class="section-title">免打扰时间</view>
				<view class="setting-item">
					<view class="setting-left">
						<uni-icons type="moon" size="20" color="#666"></uni-icons>
						<view class="setting-info">
							<text class="setting-text">夜间免打扰</text>
							<text class="setting-desc">22:00 - 08:00 期间不接收通知</text>
						</view>
					</view>
					<switch :checked="settings.nightMode" @change="toggleNightMode" color="#007AFF" />
				</view>
				<view class="setting-item" v-if="settings.nightMode">
					<view class="setting-left">
						<uni-icons type="clock" size="20" color="#666"></uni-icons>
						<view class="setting-info">
							<text class="setting-text">自定义时间</text>
							<text class="setting-desc">{{ settings.nightStart }} - {{ settings.nightEnd }}</text>
						</view>
					</view>
					<uni-icons type="right" size="16" color="#999" @tap="showTimePicker"></uni-icons>
				</view>
			</view>

			<!-- 声音和震动 -->
			<view class="setting-section" v-if="settings.enableNotification">
				<view class="section-title">声音和震动</view>
				<view class="setting-item">
					<view class="setting-left">
						<uni-icons type="sound" size="20" color="#666"></uni-icons>
						<text class="setting-text">通知声音</text>
					</view>
					<switch :checked="settings.sound" @change="toggleSound" color="#007AFF" />
				</view>
				<view class="setting-item">
					<view class="setting-left">
						<uni-icons type="vibrate" size="20" color="#666"></uni-icons>
						<text class="setting-text">震动提醒</text>
					</view>
					<switch :checked="settings.vibrate" @change="toggleVibrate" color="#007AFF" />
				</view>
			</view>

			<!-- 保存按钮 -->
			<view class="save-section">
				<button class="save-btn" @tap="saveSettings">保存设置</button>
			</view>
		</view>

		<!-- 时间选择弹窗 -->
		<view v-if="showTimeModal" class="modal-overlay" @tap="closeTimeModal">
			<view class="modal-content" @tap.stop>
				<view class="modal-header">
					<text class="modal-title">设置免打扰时间</text>
					<uni-icons type="close" size="20" color="#999" @tap="closeTimeModal"></uni-icons>
				</view>
				<view class="modal-body">
					<view class="time-picker-section">
						<view class="time-item">
							<text class="time-label">开始时间</text>
							<picker mode="time" :value="settings.nightStart" @change="onStartTimeChange">
								<view class="time-picker">{{ settings.nightStart }}</view>
							</picker>
						</view>
						<view class="time-item">
							<text class="time-label">结束时间</text>
							<picker mode="time" :value="settings.nightEnd" @change="onEndTimeChange">
								<view class="time-picker">{{ settings.nightEnd }}</view>
							</picker>
						</view>
					</view>
					<view class="modal-actions">
						<button class="cancel-btn" @tap="closeTimeModal">取消</button>
						<button class="confirm-btn" @tap="confirmTimeSettings">确定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive, onMounted } from 'vue';

	// 响应式数据
	const showTimeModal = ref(false);
	const tempStartTime = ref('22:00');
	const tempEndTime = ref('08:00');

	// 设置数据
	const settings = reactive({
		enableNotification: true,
		classMessage: true,
		homeworkReminder: true,
		liveNotification: true,
		systemMessage: true,
		pushNotification: true,
		emailNotification: false,
		smsNotification: false,
		nightMode: false,
		nightStart: '22:00',
		nightEnd: '08:00',
		sound: true,
		vibrate: true
	});

	// 消息类型配置
	const messageTypes = {
		classMessage: {
			name: '班级消息',
			desc: '班级公告、作业提醒等',
			icon: 'chat'
		},
		homeworkReminder: {
			name: '作业提醒',
			desc: '作业截止时间提醒',
			icon: 'paperplane'
		},
		liveNotification: {
			name: '直播通知',
			desc: '课程直播开始提醒',
			icon: 'videocam'
		},
		systemMessage: {
			name: '系统消息',
			desc: '系统公告、更新通知等',
			icon: 'info'
		}
	};

	// 提醒方式配置
	const reminderTypes = {
		pushNotification: {
			name: '推送通知',
			desc: '应用内推送消息',
			icon: 'notification'
		},
		emailNotification: {
			name: '邮件通知',
			desc: '重要消息邮件提醒',
			icon: 'email'
		},
		smsNotification: {
			name: '短信通知',
			desc: '紧急消息短信提醒',
			icon: 'phone'
		}
	};

	// 方法
	const goBack = () => {
		uni.navigateBack({
			fail: () => {
				uni.navigateTo({ url: '/pages/profile/profile' });
			}
		});
	};

	const toggleNotification = (e: any) => {
		settings.enableNotification = e.detail.value;
	};

	const toggleMessageType = (key: string, e: any) => {
		settings[key] = e.detail.value;
	};

	const toggleReminderType = (key: string, e: any) => {
		settings[key] = e.detail.value;
	};

	const toggleNightMode = (e: any) => {
		settings.nightMode = e.detail.value;
	};

	const toggleSound = (e: any) => {
		settings.sound = e.detail.value;
	};

	const toggleVibrate = (e: any) => {
		settings.vibrate = e.detail.value;
	};

	const showTimePicker = () => {
		tempStartTime.value = settings.nightStart;
		tempEndTime.value = settings.nightEnd;
		showTimeModal.value = true;
	};

	const closeTimeModal = () => {
		showTimeModal.value = false;
	};

	const onStartTimeChange = (e: any) => {
		tempStartTime.value = e.detail.value;
	};

	const onEndTimeChange = (e: any) => {
		tempEndTime.value = e.detail.value;
	};

	const confirmTimeSettings = () => {
		settings.nightStart = tempStartTime.value;
		settings.nightEnd = tempEndTime.value;
		closeTimeModal();
	};

	const saveSettings = () => {
		// BACKEND REQUIRED: 保存通知设置到后端
		// POST /api/user/settings/notification
		uni.showLoading({ title: '保存中...' });
		
		setTimeout(() => {
			uni.hideLoading();
			uni.showToast({
				title: '设置保存成功',
				icon: 'success'
			});
			
			// 保存到本地存储
			uni.setStorageSync('notificationSettings', settings);
		}, 1000);
	};

	const loadSettings = () => {
		// BACKEND REQUIRED: 从后端加载用户通知设置
		// GET /api/user/settings/notification
		
		// 从本地存储加载设置
		const savedSettings = uni.getStorageSync('notificationSettings');
		if (savedSettings) {
			Object.assign(settings, savedSettings);
		}
	};

	onMounted(() => {
		loadSettings();
	});
</script>

<style>
	page {
		background-color: #f5f5f5;
	}

	.notification-settings {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 顶部导航栏 */
	.header {
		background: linear-gradient(135deg, #007AFF, #5856D6);
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}

	.header-left {
		display: flex;
		align-items: center;
		padding: 10rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 50%;
		min-width: 60rpx;
		min-height: 60rpx;
		justify-content: center;
	}

	.back-icon {
		font-size: 36rpx;
		color: #fff;
		font-weight: bold;
		line-height: 1;
	}

	.header-center {
		flex: 1;
		text-align: center;
	}

	.header-title {
		font-size: 32rpx;
		color: #fff;
		font-weight: bold;
	}

	.header-right {
		min-width: 60rpx;
	}

	/* 设置内容 */
	.settings-content {
		padding: 20rpx;
	}

	.setting-section {
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.section-title {
		padding: 30rpx 30rpx 20rpx;
		font-size: 28rpx;
		color: #666;
		font-weight: 500;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.setting-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.setting-item:last-child {
		border-bottom: none;
	}

	.setting-left {
		display: flex;
		align-items: center;
		gap: 20rpx;
		flex: 1;
	}

	.setting-info {
		display: flex;
		flex-direction: column;
		gap: 4rpx;
	}

	.setting-text {
		font-size: 30rpx;
		color: #333;
		font-weight: 500;
	}

	.setting-desc {
		font-size: 24rpx;
		color: #999;
	}

	/* 保存按钮 */
	.save-section {
		padding: 40rpx 0;
	}

	.save-btn {
		width: 100%;
		background: linear-gradient(135deg, #007AFF, #5856D6);
		color: #fff;
		border: none;
		border-radius: 16rpx;
		padding: 30rpx;
		font-size: 32rpx;
		font-weight: bold;
	}

	/* 弹窗样式 */
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}

	.modal-content {
		background: #fff;
		border-radius: 16rpx;
		width: 90%;
		max-width: 600rpx;
	}

	.modal-header {
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.modal-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.modal-body {
		padding: 30rpx;
	}

	.time-picker-section {
		display: flex;
		flex-direction: column;
		gap: 30rpx;
		margin-bottom: 40rpx;
	}

	.time-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.time-label {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.time-picker {
		background: #f8f9fa;
		padding: 20rpx 30rpx;
		border-radius: 12rpx;
		font-size: 28rpx;
		color: #007AFF;
		font-weight: bold;
	}

	.modal-actions {
		display: flex;
		gap: 20rpx;
	}

	.cancel-btn, .confirm-btn {
		flex: 1;
		padding: 20rpx;
		border-radius: 12rpx;
		font-size: 28rpx;
		border: none;
	}

	.cancel-btn {
		background: #f5f5f5;
		color: #666;
	}

	.confirm-btn {
		background: #007AFF;
		color: #fff;
	}
</style>


